<template>
	<view>
		<view class="section">
			<view class="section-1 flex-align">
				<view class="image">
					<image :src="data.cover"></image>
				</view>
				<view class="detail">
					<view>
						<view class="detail-1">
							{{ data.name }}
						</view>
						<view class="detail-1">
							剩余名额:{{ stock }}
						</view>
						<!-- <view class="flex-align" style="margin-top: 30rpx">
							<view v-for="(item, index) in checkedSpec" :key="index" style="margin-right: 10rpx">
								<u-tag :text="item.name"></u-tag>
							</view>
						</view> -->
					</view>
					<view class="btns_ms">
						<view class="btns_m" @click="schedule" v-if="look">
							查看课表
						</view>

					</view>
					<view style="
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		  ">
						<view class="price">￥<text>{{ price_selling }}</text>
						</view>
						<!-- <view class="detail-2">剩余名额:<text style="color: orange">{{
		      chooseStock
		    }}</text></view> -->
					</view>
				</view>
			</view>

			<!-- 	<view class="section-2" v-for="(item, index) in data.data_specs" :key="index">
				<view class="sub-title">{{ item.name }}</view>
				<view class="tag-list">
					<u-tag v-for="(item2, index2) in item.list" :key="index2" :text="item2.name" :bgColor="
		    checkedSpec.indexOf(item2) > -1
		      ? 'rgba(47, 117, 250, 0.05)'
		      : '#EFEFEF'
		  " :borderColor="
		    checkedSpec.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
		  " :color="checkedSpec.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="clickSpec(item2)" />
					<view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view>

				</view>
			</view> -->
			<view class="section-2">
				<view class="sub-title">请选择教练</view>
				<view class="top-menu-list">
					<view class="top-menu-item" v-for="(item, index) in project" :key="index"
						@click="openKind(item,index)">
						<!-- <view class="add_na">
								<view :class="[
				  clickMenuId == item.id ? 'menu-image' : 'menu-image-no-checked',
				]">
									<image :src="item.icon" mode="scaleToFill" />
								</view>
								
								<text :class="[
				  clickMenuId == item.id ? 'checked-text' : 'no-checked-text',
				]">{{ item.name }}</text>
							</view> -->
						<view class="add_na">
							<view :class="[
							  clickMenuId == item.id ? 'menu-image' : 'menu-image-no-checked',
							]">
								<image style="border-radius: 50% 50%;" :src="item.coach_avatar" mode="scaleToFill" />
							</view>

							<text :class="[
							  clickMenuId == item.id ? 'checked-text' : 'no-checked-text',
							]">{{ item.full_name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="section-2" v-if="banbie">
				<view class="sub-title">选择班别</view>
				<view class="tag-list">
					<!-- <u-tag v-for="(item2, index2) in coach.toulist" :key="index2" :text="item2.name"  @click="clickSpec(item2)" /> -->
					<u-tag v-for="(item2,index2) in class_list" :key="index2" :text="item2.class_name" type="warning"
						:bgColor="
						  data_name.indexOf(item2) > -1
						    ? 'rgba(47, 117, 250, 0.05)'
						    : '#EFEFEF'
						" :borderColor="
						  data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
						" :color="data_name.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="data_specss(item2,index2)" />
					<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->

				</view>
			</view>


			<view class="section-2" v-if="xiaoqu">
				<view class="sub-title">选择校区</view>
				<view class="tag-list">
					<!-- <u-tag v-for="(item2, index2) in coach.toulist" :key="index2" :text="item2.name"  @click="clickSpec(item2)" /> -->
					<u-tag v-for="(item3,index3) in coach_list" :key="index3" :text="item3.area_name" type="warning"
						:bgColor="
						  data_area.indexOf(item3) > -1
						    ? 'rgba(47, 117, 250, 0.05)'
						    : '#EFEFEF'
						" :borderColor="
						  data_area.indexOf(item3) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
						" :color="data_area.indexOf(item3) > -1 ? '#2F75FA' : '#333'" @click="data_coach(item3,index3)" />
					<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->

				</view>
			</view>
			<view class="section-2" v-if="guige">
				<view class="sub-title">选择规格</view>
				<view class="tag-list">
					<!-- <u-tag v-for="(item2, index2) in coach.toulist" :key="index2" :text="item2.name"  @click="clickSpec(item2)" /> -->
					<u-tag v-for="(item4,index4) in arealist" :key="index4" :text="item4.item_name" type="warning"
						:bgColor="
						  arealist_area.indexOf(item4) > -1
						    ? 'rgba(47, 117, 250, 0.05)'
						    : '#EFEFEF'
						" :borderColor="
						  arealist_area.indexOf(item4) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
						" :color="arealist_area.indexOf(item4) > -1 ? '#2F75FA' : '#333'" @click="data_arealist(item4,index4)" />
					<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->

				</view>
			</view>
			<view class="" style="width: 100%;height: 140rpx;"></view>
			<view class=""
				style="width: 100%;height: 140rpx;background-color: rgb(255, 255, 255);position: fixed;bottom: 0;left: 0;">
				<view class="btns" @click="handSubmit" v-if="stock > 0">立即报名</view>
				<view class="btns_s" v-if="stock == 0">立即报名</view>
			</view>
			<con-alert :show="alertShow" @close="close" :title="full_name">
				<view class="select-list">
					<view class="item flex-align" v-for="(item,index) in courseData" :key="index">
						<view class="detail">
							<view class="flex-between bottom">
								<view class="flex-align" style="width: 10%">
									<text class="address">{{index}}</text>
								</view>
								<view class="flex-align" style="width: 20%">
									<text>{{item.course_name}}</text>
								</view>
								<view class="flex-align" style="width: 20%">
									<text>{{item.course_date}}</text>
								</view>
								<view class="flex-align" style="width: 10%">
									<text>{{item.name}}</text>
								</view>
								<view class="flex-align" style="width: 20%">
									<text>{{item.period_time}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</con-alert>
		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import conAlert from "@/components/com-alert/com-alert.vue";
	export default {
		components: {
			conAlert
		},
		data() {
			return {
				alertShow: false,
				tabActiveIndex: 0,
				id: 0,
				data: {},
				venue_name: "",
				checkedSpec: [],
				checkedSpecStr: "",
				price: "0.00",
				venue_id: 0,
				chooseStock: 0,
				sum: '',
				sku: '',
				toulist: [],
				namelist: "",
				elseStock: 0,
				data_name: [],
				project: [],
				clickMenuId: 0,
				coach_id: '',
				class_list: [],
				class_id: '',
				data_area: [],
				area_id: '',
				coach_list: [],
				areaStock: 0,
				area_id: '',
				arealist: [],
				arealist_area: [],
				price_selling: '',
				stock: '',
				sku_id: '',
				courseData: [],
				banbie: false,
				xiaoqu: false,
				guige: false,
				train_enum_id: '',
				goods_code: '',
				goods_sku: '',
				full_name: '',
				look: false
			};
		},

		onLoad(options) {
			console.log(options, 5555)
			this.id = options.id
			this.venue_id = options.venue_id
			this.venue_name = options.venue_name
			this.train_enum_id = options.train_enum_id
			this.getTrainDetail();
			this.coachlist();
		},

		methods: {
			// 获取培训班详情
			async coachlist() {
				let postData = {
					train_id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await train.coach(postData);
				if (res.code == 1) {
					this.project = res.data.list

				}
			},
			//教练点击事件
			openKind(item, index, type) {
				console.log(item, index, '111')
				this.look = false
				this.full_name = item.full_name
				let _this = this
				this.courseData = []
				this.sku_id = ''
				if (this.clickMenuId == item.id) {
					this.clickMenuId = 0
					this.class_list = []
					this.coach_list = []
					this.arealist = []
					this.arealist_area = []
					this.banbie = false
					this.xiaoqu = false
					this.guige = false
					this.stock = ''
					this.price_selling = ''
				} else {
					this.clickMenuId = item.id;
					this.coach_id = item.id
					this.banbie = true
					this.xiaoqu = false
					this.guige = false
					this.class_list = []
					this.coach_list = []
					this.arealist = []
					this.classeslist()
					this.stock = ''
					this.price_selling = ''
				}
				if (this.clickMenuId === -1) {} else {}
				// uni.navigateTo({
				// 	url:"/pages/venues/kindDetail/kindDetail"
				// })
			},
			// 长训班根据教练获取班别列表
			async classeslist() {
				let postData = {
					train_id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					coach_id: this.coach_id
				}
				let res = await train.classes(postData);
				if (res.code == 1) {
					this.class_list = res.data.list
				}
			},
			// 长训班根据教练获取校区列表
			async areaslist() {
				let postData = {
					train_id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					class_id: this.class_id,
					coach_id: this.coach_id
				}
				let res = await train.areas(postData);
				if (res.code == 1) {
					this.coach_list = res.data.list
				}
			},
			// 长训班根据教练获取规格列表
			async skulist() {
				let postData = {
					train_id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					coach_id: this.coach_id,
					class_id: this.class_id,
					area_id: this.area_id
				}
				let res = await train.sku(postData);
				if (res.code == 1) {
					this.arealist = res.data.list;

				}
			},
			close() {
				this.alertShow = false;
			},
			// 查看课表
			schedule() {
				this.hourList()
				this.alertShow = true;
			},

			// 班别点击
			data_specss(item2, index2) {
				this.look = false
				this.xiaoqu = true
				this.class_id = item2.id
				this.elseStock = 0
				this.data_name = []
				let data_name = []
				this.data_area = []
				this.arealist_area = []
				this.courseData = []
				this.sku_id = ''
				this.stock = ''
				this.price_selling = ''
				this.class_list.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.class_list.map((item, index) => {
					item.checked = index === index2 ? true : false
				})
				this.areaslist()

			},
			// 校区点击
			data_coach(item3, index3) {
				this.look = false
				this.courseData = []
				this.sku_id = ''
				this.guige = true
				this.area_id = item3.id
				this.areaStock = 0
				this.data_area = []
				this.arealist_area = []
				let data_area = []
				this.stock = ''
				this.price_selling = ''
				this.coach_list.forEach(item => {
					data_area.push(item)
				})
				data_area.some((item, index) => {
					if (item == item3) {
						this.data_area[index] = item3;
						this.$forceUpdate();
					}
				});

				this.coach_list.map((item, index) => {
					item.checked = index === index3 ? true : false
				})
				this.skulist()
			},
			//选择规格
			data_arealist(item4, index4) {
				this.look = true
				console.log(item4, index4, '222')
				this.courseData = []
				this.sku_id = item4.id
				this.goods_code = item4.goods_code
				this.goods_sku = item4.goods_sku
				this.price_selling = item4.price_selling
				this.stock = item4.stock
				this.areaStock = 0
				this.arealist_area = []
				let arealist_area = []
				this.arealist.forEach(item => {
					arealist_area.push(item)
				})
				arealist_area.some((item, index) => {
					if (item == item4) {
						this.arealist_area[index] = item4;
						this.$forceUpdate();
					}
				});

				this.arealist.map((item, index) => {
					item.checked = index === index4 ? true : false
				})
			},
			async hourList() {
				let postData = {
					sku_id: this.sku_id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await train.hourList(postData);
				if (res.code == 1) {
					this.courseData = res.data.courseData

				}
			},

			clickSpec(name) {
				this.checkedSpecStr = "";
				this.checkedSpec.some((item, index) => {
					if (item.group == name.group) {
						this.checkedSpec[index] = name;
						this.$forceUpdate();
					}
				});
				this.checkedSpec.forEach((item, index) => {
					this.checkedSpecStr += `${item.group}::${item.name};;`;
				});
				this.checkedSpecStr = this.checkedSpecStr.substring(
					0,
					this.checkedSpecStr.lastIndexOf(";;")
				);
				this.getSkuData(this.checkedSpecStr);
			},
			// 获取培训班详情
			async getTrainDetail() {
				let postData = {
					train_id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await train.getTrainDetail(postData);
				if (res.code == 1) {
					this.data = res.data.train;
					// let defaultObj = this.data.data_specs;
					// let defaultObjLength = this.data.data_specs.length;
					// // int sum = 0;
					// var data_items = this.data.data_items
					// var sum = 0;
					// data_items.forEach((item, index) => {
					// 	sum += parseFloat(item[0].stock);
					// 	this.sum = sum
					// 	return sum;
					// })

					// for (var i = 0; i < defaultObjLength; i++) {
					// 	this.checkedSpec.push(defaultObj[i].list[0]);
					// }
					// this.checkedSpecStr = "";
					// this.checkedSpec.forEach((item, index) => {
					// 	this.checkedSpecStr += `${item.group}::${item.name};;`;
					// });
					// this.checkedSpecStr = this.checkedSpecStr.substring(
					// 	0,
					// 	this.checkedSpecStr.lastIndexOf(";;")
					// );
					// this.getSkuData(this.checkedSpecStr);
				}
			},
			// 获取SKU数据
			getSkuData(checkedSpecStr) {
				for (var items = 0; items < this.data.data_items.length; items++) {
					if (checkedSpecStr == this.data.data_items[items][0].key) {
						this.price = this.data.data_items[items][0].selling;
						this.chooseStock = this.data.data_items[items][0].stock;
						this.sku = this.data.data_items[items][0].sku;

					}
				}
			},
			handSubmit() {
				uni.navigateTo({
					url: "/pages_other/train/selectStudy?id=" +
						this.data.id + "&stock=" +
						this.stock + "&price_selling=" +
						this.price_selling +
						"&venue_name=" +
						this.venue_name +
						"&train_enum_id=" +
						this.train_enum_id +
						"&sku=" +
						this.goods_sku +
						"&skucode=" +
						this.goods_code + "&venue_id=" +
						this.venue_id + "&sku_id=" +
						this.sku_id,
				});


			},
			changeTab(data) {
				this.tabActiveIndex = data.index;
			},
			back() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.section {
		padding: 24rpx;

		.select-list {
			.item {
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				height: 50rpx;
				border-bottom: 1px solid #cccccc;
				padding: 0;

				&:last-of-type {
					border: none;
					margin: 0;
					padding: 0;
				}

				.image {
					width: 150rpx;
					height: 100%;

					/deep/ .vue-ref {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					height: 100%;
					flex: 1;
					width: 0;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: 700;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}

					.timer {
						color: #cacaca;
						font-size: 20rpx;
					}

					.bottom {
						font-size: 20rpx;
						color: #101010;

						.address {
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.btns {
			background: linear-gradient(0deg, #528EFF, #2F75FA);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			// padding: 26rpx 0;
			// margin: 0px 30rpx;
			// margin-top: 120rpx;
			text-align: center;
			position: fixed;
			bottom: 24px;
			left: 5%;
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btns_m {
			background: linear-gradient(0deg, #528EFF, #2F75FA);
			border-radius: 5px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding: 26rpx 0;
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 12rpx;

		}

		.btns_ms {
			position: absolute;
			right: 10rpx;
			top: 110rpx;
		}

		.btns_s {
			background: linear-gradient(0deg, #bebebe, #bebebe);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			// padding: 26rpx 0;
			// margin: 0px 30rpx;
			// margin-top: 120rpx;
			text-align: center;
			position: fixed;
			bottom: 24px;
			left: 5%;
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
		}

		.section-1 {
			height: 200rpx;



			.image {
				width: 200rpx;
				height: 100%;
				margin-right: 26rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail {
				flex: 1;
				width: 0;
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: space-between;

				.detail-1 {
					font-size: 27rpx;
					font-weight: 500;
					color: #333333;
				}

				.detail-2 {
					font-size: 24rpx;
					font-weight: 500;
					color: #888888;
					margin-top: 12rpx;
				}

				.price {
					font-size: 20rpx;
					font-weight: 500;
					color: #ff0000;

					text {
						font-size: 32rpx;
						font-weight: 700;
					}
				}
			}
		}

		.section-2 {
			margin-top: 30rpx;

			.top-menu-list {
				display: flex;
				flex-wrap: wrap;

				.top-menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					// margin-top: 10rpx;
					padding: 0px 30rpx;
					box-sizing: border-box;
					font-size: 25rpx;

					.add_na {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 20%;
						// margin-top: 30rpx;
						padding: 0px 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;

						.menu-image {
							width: 100rpx;
							height: 100rpx;
							// border-radius: 37rpx;
							// background: rgb(250, 237, 234);
							// background: linear-gradient(45deg,
							// 		rgba(250, 237, 234, 1) 0%,
							// 		rgba(246, 227, 216, 1) 77%);
							background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
							background-size: 100% 100%;
							// position: absolute;
							// top: 0;
							// right: 0;
							// z-index: 999;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.menu-image-no-checked {
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.no-checked-text {
							white-space: nowrap;
						}

						.checked-text {
							margin-top: 20rpx;
							white-space: nowrap;
							font-weight: bold;
						}
					}
				}
			}

			.sub-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.tag-list {
				display: flex;
				flex-wrap: wrap;

				/deep/.u-tag {
					margin-left: 30rpx;
					margin-bottom: 30rpx;
				}

				// .tag{
				// 	background: #EFEFEF;
				// 	border-radius: 3px;
				// 	font-size: 24rpx;
				// 	font-weight: 500;
				// 	color: #FFFFFF;
				// 	padding: 7rpx 20rpx;
				// 	margin-right: 20rpx;
				// 	margin-bottom: 20rpx;
				// }

			}
		}



		.section-3 {
			font-size: 22rpx;
			font-weight: 500;
			color: #333333;
		}
	}
</style>
